import React, {Component} from 'react';
import {StyleSheet, ScrollView, LayoutAnimation} from 'react-native';
import {
  Assets,
  Colors,
  Typography,
  View,
  Drawer,
  Text,
  Button,
  Avatar,
  Badge,
  DrawerProps,
} from 'react-native-ui-lib';
import conversations from '../../data/conversations';
import {TestCase, TestSuite} from '@rnoh/testerino';

import {
  renderBooleanOption,
  renderSliderOption,
  renderColorOption,
} from '../ExampleScreenPresenter';

const ITEMS = {
  read: {
    icon: require('../../assets/icons/mail.png'),
    text: 'Read',
    background: Colors.green30,
    testID: 'left_item_read',
  },
  archive: {
    icon: require('../../assets/icons/archive.png'),
    text: 'Archive',
    background: Colors.blue30,
    testID: 'right_item_archive',
  },
  delete: {
    icon: require('../../assets/icons/delete.png'),
    text: 'Delete',
    background: Colors.red30,
    testID: 'right_item_delete',
  },
};

class DrawerScreen extends Component {
  state = {
    hideItem: false,
    showRightItems: true,
    fullSwipeRight: true,
    showLeftItem: true,
    fullSwipeLeft: true,
    unread: true,
    itemsTintColor: undefined,
    bounciness: undefined,
    itemsIconSize: undefined,
  };

  ref: React.Ref<typeof Drawer> = null;

  componentDidUpdate(_prevProps: any, prevState: typeof this.state) {
    if (this.state.hideItem && prevState.hideItem) {
      this.showItem();
    }
  }

  deleteItem = () => {
    // TODO: consider including this functionality as part of the drawer component
    setTimeout(() => {
      LayoutAnimation.configureNext({
        update: {
          type: LayoutAnimation.Types.easeInEaseOut,
          property: LayoutAnimation.Properties.scaleY,
        },
        delete: {
          type: LayoutAnimation.Types.easeInEaseOut,
          property: LayoutAnimation.Properties.scaleY,
          duration: 2000,
        },
        duration: 120,
      });
      this.setState({hideItem: true});
    }, 200);
  };

  toggleReadState = () => {
    this.setState({unread: !this.state.unread});
  };

  showItem = () => {
    this.setState({hideItem: false});
  };

  openLeftDrawer = () => {
    if (this.ref) {
      // @ts-expect-error
      this.ref.openLeft();
    }
  };
  openLeftDrawerFull = () => {
    if(!this.state.fullSwipeLeft) return;
    if (this.ref) {
      // @ts-expect-error
      this.ref.openLeftFull();
    }
  };
  toggleLeftDrawer = () => {
    if (this.ref) {
      // @ts-expect-error
      this.ref.toggleLeft();
    }
  };
  openRightDrawer = () => {
    if (this.ref) {
      // @ts-expect-error
      this.ref.openRight();
    }
  };
  openRightDrawerFull = () => {
    if(!this.state.fullSwipeRight) return;
    if (this.ref) {
      // @ts-expect-error
      this.ref.openRightFull();
    }
  };
  closeDrawer = () => {
    if (this.ref) {
      // @ts-expect-error
      this.ref.closeDrawer();
    }
  };

  renderActions() {
    return (
      <View center marginB-s4>
        <Text text70>Actions</Text>
        <View row>
          <View>
            <Button
              onPress={this.openLeftDrawer}
              label="Open left"
              style={{margin: 3}}
              size={'xSmall'}
              testID="open_left_btn"
            />
            <Button
              onPress={this.openLeftDrawerFull}
              label="Full left swipe"
              style={{margin: 3}}
              size={'xSmall'}
              testID="swipe_left_btn"
            />
            <Button
              onPress={this.toggleLeftDrawer}
              label="Left toggle"
              style={{margin: 3}}
              size={'xSmall'}
              testID="toggle_left_btn"
            />
          </View>

          <View marginH-20>
            <Button
              onPress={this.closeDrawer}
              label="Close"
              style={{margin: 3}}
              size={'xSmall'}
              testID="close_btn"
            />
          </View>

          <View>
            <Button
              onPress={this.openRightDrawer}
              label="Open right"
              style={{margin: 3}}
              size={'xSmall'}
              testID="open_right_btn"
            />
            <Button
              onPress={this.openRightDrawerFull}
              label="Full right swipe"
              style={{margin: 3}}
              size={'xSmall'}
              testID="swipe_right_btn"
            />
          </View>
        </View>
      </View>
    );
  }

  renderListItem() {
    const data = conversations[2];

    return (
      <View
        bg-grey80
        paddingH-20
        paddingV-10
        row
        centerV
        style={{borderBottomWidth: 1, borderColor: Colors.grey60}}
        testID="drawer_item">
        {this.state.unread && (
          <Badge
            testID="drawer_item_badge"
            size={6}
            backgroundColor={Colors.red30}
            containerStyle={{marginRight: 8}}
          />
        )}
        <Avatar source={{uri: data.thumbnail}} />
        <View marginL-20>
          <Text text70R={!this.state.unread} text70BO={this.state.unread}>
            {data.name}
          </Text>
          <Text text80 marginT-2>
            {data.text}
          </Text>
        </View>
      </View>
    );
  }

  render() {
    const {
      showRightItems,
      fullSwipeRight,
      showLeftItem,
      fullSwipeLeft,
      itemsTintColor,
      bounciness,
      itemsIconSize,
      hideItem,
    } = this.state;

    const drawerProps: DrawerProps = {
      itemsTintColor,
      itemsIconSize,
      bounciness,
      // @ts-expect-error
      ref: component => (this.ref = component),
      fullSwipeRight,
      onFullSwipeRight: this.deleteItem,
      fullSwipeLeft,
      onWillFullSwipeLeft: this.deleteItem,
      onToggleSwipeLeft: this.toggleReadState,
      testID: 'drawer',
    };
    if (showRightItems) {
      drawerProps.rightItems = [
        {...ITEMS.delete, onPress: this.deleteItem},
        ITEMS.archive,
      ];
    }

    if (showLeftItem) {
      drawerProps.leftItem = {
        ...ITEMS.read,
        icon: this.state.unread
          ? require('../../assets/icons/mail.png')
          : require('../../assets/icons/refresh.png'),
        text: !this.state.unread ? 'Unread' : 'Read',
        background: this.state.unread ? Colors.green30 : Colors.orange30,
        onPress: this.toggleReadState,
      };
    }

    return (
      <TestSuite name="Drawer">
        <TestCase itShould="设置 rightItems, leftItem">
          <View padding-20>
            <Drawer
              rightItems={[
                {
                  text: 'Read',
                  background: Colors.blue30,
                  textColor: Colors.red10,
                  onPress: () => console.log('read pressed'),
                },
              ]}
              leftItem={{
                text: 'Delete',
                background: Colors.red30,
                onPress: () => console.log('delete pressed'),
              }}>
              <View centerV padding-s4 bg-white style={{height: 60}}>
                <Text text70>Item</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>
        <TestCase itShould="属性测试">
          <View flex>
            <View row padding-20 paddingB-0 marginB-20 centerV>
              <Text text40>Drawer</Text>
              <Button
                link
                grey10
                marginL-s1
                marginT-2
                iconSource={Assets.icons.demo.refresh}
                onPress={this.showItem}
                disabled={!hideItem}
                testID="refresh_btn"
              />
            </View>
            {!hideItem && (
              <>
                <Drawer key={Date.now()} {...drawerProps}>
                  {this.renderListItem()}
                </Drawer>
              </>
            )}

            <ScrollView
              style={styles.container}
              contentContainerStyle={styles.contentContainer}>
              <View padding-20>
                {this.renderActions()}
                {renderBooleanOption.call(this, 'rightItems', 'showRightItems')}
                {showRightItems &&
                  renderBooleanOption.call(
                    this,
                    'fullSwipeRight',
                    'fullSwipeRight',
                  )}
                {renderBooleanOption.call(this, 'leftItem', 'showLeftItem')}
                {showLeftItem &&
                  renderBooleanOption.call(
                    this,
                    'fullSwipeLeft',
                    'fullSwipeLeft',
                  )}
                {renderColorOption.call(
                  this,
                  'icon+text color',
                  'itemsTintColor',
                )}
                {renderSliderOption.call(this, 'bounciness', 'bounciness', {
                  min: 5,
                  max: 15,
                  step: 1,
                  initial: 5,
                })}
                {renderSliderOption.call(this, 'iconSize', 'itemsIconSize', {
                  min: 15,
                  max: 25,
                  step: 1,
                  initial: 20,
                })}
              </View>
            </ScrollView>
          </View>
        </TestCase>
      </TestSuite>
    );
  }
}

export default DrawerScreen;
// export default DrawerScreen;

const styles = StyleSheet.create({
  container: {
    backgroundColor: Colors.white,
  },
  contentContainer: {
    paddingBottom: 50,
  },
  drawer: {
    marginTop: 20,
  },
  listContent: {
    backgroundColor: Colors.grey80,
  },
  rowContent: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: Colors.grey80,
  },
  rowIcon: {
    width: 38,
    height: 38,
    borderRadius: 19,
    backgroundColor: Colors.violet40,
    margin: 20,
  },
  rowTitle: {
    ...Typography.text70,
    fontWeight: 'bold',
    color: Colors.grey20,
  },
  rowSubtitle: {
    ...Typography.text80,
    color: Colors.grey30,
  },
  rowButtonContainer: {
    flex: 1,
    alignItems: 'flex-end',
    padding: 10,
  },
});
